<template>
	<div>
		<!--面包屑-->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }"> 首页</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			<el-breadcrumb-item>商品分类</el-breadcrumb-item>
		</el-breadcrumb>

		<!--卡片视图-->
		<el-card>
			<!--添加分类按钮-->
			<el-row>
				<el-col>
					<el-button type="primary" @click="openAddGoodsCateVisible">添加分类</el-button>
				</el-col>
			</el-row>

			<!--表格区域-->
			<tree-table class="treeTable" :data="goodsCatelist" :columns="columns" :selection-type="false" :expand-type="false" show-index index-text="#" border>
				<!--模板列1,是否有效-->
				<template slot="isok" slot-scope="scope">
					<i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color: lightgreen"></i>
					<i class="el-icon-error" v-else style="color: red"></i>
				</template>

				<!--模板列2，排序-->
				<template slot="order" slot-scope="scope">
					<el-tag v-if="scope.row.cat_level === 0">一级</el-tag>
					<el-tag type="success" v-if="scope.row.cat_level === 1">二级</el-tag>
					<el-tag type="warning" v-if="scope.row.cat_level === 2">三级</el-tag>
				</template>

				<template slot="opt" slot-scope="scope">
					<el-button type="primary" icon="el-icon-edit" size="mini" @click="editCate(scope.row)">编辑</el-button>
					<el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteCate(scope.row)">删除</el-button>
				</template>
			</tree-table>

			<!--分页区域-->
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="queryInfo.pagenum"
				:page-sizes="[5, 10, 15, 20]"
				:page-size="queryInfo.pagesize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
			>
			</el-pagination>
		</el-card>

		<!--添加分类对话框-->
		<el-dialog title="添加分类" :visible.sync="addGoodsCateVisible" width="25%" @close="initData">
			<!--分类名称-->
			<el-form :model="addGoodsCateForm" label-width="80px">
				<el-form-item label="分类名称:">
					<el-input v-model="addGoodsCateForm.cat_name"></el-input>
				</el-form-item>

				<el-form-item label="父级分类:">
					<el-cascader v-model="selectCatevalue" :options="parentCate" :props="parentCateProps" @change="parentCateChange" clearable></el-cascader>
				</el-form-item>
			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button @click="addGoodsCateVisible = false">取 消</el-button>
				<el-button type="primary" @click="submitAddGoodsCate">确 定</el-button>
			</span>
		</el-dialog>

		<!--修改分类对话框-->
		<el-dialog title="编辑分类" :visible.sync="editCateVisible" width="25%" @close="initData">
			<!--分类名称-->
			<el-form :model="editCateForm" label-width="80px">
				<el-form-item label="分类名称:">
					<el-input v-model="editCateForm.cat_name"></el-input>
				</el-form-item>
			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button @click="editCateVisible = false">取 消</el-button>
				<el-button type="primary" @click="submitEditCate">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	data() {
		return {
			// 存储商品的分类数据
			goodsCatelist: [],
			// 请求商品分类数据用的传参
			queryInfo: {
				type: 3,
				pagenum: 1,
				pagesize: 5,
			},
			// 分类数据总数量
			total: 0,

			// 为table指定列的定义 (重要)
			columns: [
				{
					label: '分类名称',
					prop: 'cat_name',
				},
				{
					label: '是否有效',
					// 将此列指定为模版列
					type: 'template',
					// 表示当前这一列使用的模版名称
					template: 'isok',
				},
				{
					label: '排序',
					// 将此列指定为模版列
					type: 'template',
					// 表示当前这一列使用的模版名称
					template: 'order',
				},
				{
					label: '操作',
					width: '200',
					// 将此列指定为模版列
					type: 'template',
					// 表示当前这一列使用的模版名称
					template: 'opt',
				},
			],
			// 是否显示添加分类对话框控制属性
			addGoodsCateVisible: false,
			// 添加分类表单的数据对象
			addGoodsCateForm: {
				// 父级分类ID
				cat_pid: 0,
				cat_name: '',
				// 默认添加一级分类
				cat_level: 0,
			},
			// 父级分类数据
			parentCate: [],
			// 指定级联选择器的配置对象
			parentCateProps: {
				expandTrigger: 'hover',
				checkStrictly: true,
				value: 'cat_id',
				label: 'cat_name',
				children: 'children',
			},
			// 选中的父级分类的ID数组
			selectCatevalue: [],
			editCateVisible: false,
			editCateForm: {
				cat_name: '',
				cat_id: '',
			},
		}
	},
	// 生命周期函数
	created() {
		this.getGoodsCateList()
	},
	methods: {
		// eslint-disable-next-line no-mixed-spaces-and-tabs
		// 请求分类数据函数
		async getGoodsCateList() {
			const { data: res } = await this.$http.get('categories', { params: this.queryInfo })
			if (res.meta.status !== 200) {
				return this.$message.error('请求分类数据失败')
			}
			this.goodsCatelist = res.data.result
			this.total = res.data.total
		},

		// 监听每页条数变化
		handleSizeChange(newSize) {
			this.queryInfo.pagesize = newSize
			this.getGoodsCateList()
		},
		// 监听页码变化
		handleCurrentChange(newPage) {
			this.queryInfo.pagenum = newPage
			this.getGoodsCateList()
		},

		// 点击打开添加分类对话框,请求获取分类数据
		async openAddGoodsCateVisible() {
			const { data: res } = await this.$http.get('categories', { params: { type: 2 } })
			if (res.meta.status !== 200) {
				return this.$message.error('获取父级分类数据失败')
			}
			this.parentCate = res.data
			this.addGoodsCateVisible = true
		},

		// 选择性发生变化触发的事件
		parentCateChange() {
			if (this.selectCatevalue.length > 0) {
				// 父级分类的ID
				this.addGoodsCateForm.cat_pid = this.selectCatevalue[this.selectCatevalue.length - 1]
				//当前层级
				this.addGoodsCateForm.cat_level = this.selectCatevalue.length
				return
			} else {
				// 父级分类的ID
				this.addGoodsCateForm.cat_pid = 0
				//当前层级
				this.addGoodsCateForm.cat_level = 0
			}
		},

		// 提交添加分类信息
		async submitAddGoodsCate() {
			const { data: res } = await this.$http.post('categories', this.addGoodsCateForm)
			if (res.meta.status !== 201) {
				return this.$message.error('添加分类失败')
			}
			this.getGoodsCateList()
			this.$message.success('添加分类成功')
			this.addGoodsCateVisible = false
		},

		// 初始化数据
		initData() {
			this.selectCatevalue = []
			this.addGoodsCateForm.cat_name = ''
			this.addGoodsCateForm.cat_pid = 0
			this.addGoodsCateForm.cat_level = 0
		},

		// 打开编辑分类对话窗
		editCate(row) {
			this.editCateForm.cat_name = row.cat_name
			this.editCateForm.cat_id = row.cat_id
			this.editCateVisible = true
		},

		// 提交修改分类信息
		async submitEditCate() {
			const { data: res } = await this.$http.put('categories/' + this.editCateForm.cat_id, { cat_name: this.editCateForm.cat_name })
			if (res.meta.status !== 200) {
				return this.$message.error('修改分类失败')
			}
			this.$message.success('修改分类成功')
			this.getGoodsCateList()
			this.editCateVisible = false
		},

		// 删除分类
		async deleteCate(row) {
			this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(async () => {
					const { data: res } = await this.$http.delete('categories/' + row.cat_id)
					if (res.meta.status !== 200) {
						return this.$$message.error('删除失败')
					}
					this.getGoodsCateList()
					this.$message({
						type: 'success',
						message: '删除成功!',
					})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除',
					})
				})
		},
	},
}
</script>

<style lang="less" scoped>
.treeTable {
	margin-top: 15px;
}
</style>
